 import {
   getCateListApi
 } from '@/api/cate'
 import {
   getParamsByCatIdApi
 } from '@/api/params'

 import {
   addGoodsApi
 } from '@/api/goods'
 // 导入loadash
 import _ from 'lodash'
 export default {
   data() {
     return {
       // 当前激活的步骤条的索引
       activeIndex: 0,
       // 添加表单对象
       addForm: {
         goods_name: '',
         goods_price: 0,
         goods_weight: 0,
         goods_number: 0,
         // 商品分类：添加商品时要求是以","隔开的字符串，类似于 1,3,5，在级联菜单展示时要求是数组,类似于[1,3,5]
         goods_cat: [], // 定义成数组，最后添加入库时转换为字符串
         pics: [], // 上传的图片临时路径（对象）
         goods_introduce: '' // 商品介绍

       },
       // 添加表单验证规则
       addFormRules: {
         goods_name: [{
           required: true,
           message: '请输入商品名称',
           trigger: 'blur'
         }],
         goods_price: [{
           required: true,
           message: '请输入商品价格',
           trigger: 'blur'
         }],
         goods_weight: [{
           required: true,
           message: '请输入商品重量',
           trigger: 'blur'
         }],
         goods_number: [{
           required: true,
           message: '请输入商品数量',
           trigger: 'blur'
         }]
       },
       // 分类数据
       cateList: [],
       // 参数规则
       // 级联菜单的配置项
       cascaderOptions: {
         // 是hover方式展开
         expandTrigger: 'hover',
         // 级联菜单收集的是id数据
         value: 'cat_id',
         // 显示的数据属性
         label: 'cat_name',
         // 层级之间的关联属性
         children: 'children',
         // 可以选中任意一级分类
         checkStrictly: true
       },
       // 动态参数
       manyParams: [],
       // 静态属性
       onlyParams: [],
       // 图片上传的地址:由于并不是通过axios进行文件上传的，所以必须填写完成的路径地址
       uploadUrl: 'http://localhost:8888/api/private/v1/upload',
       // 文件上传时携带的请求头
       uploadHeaders: {
         Authorization: window.sessionStorage.getItem('token')
       },
       // 图片预览的对话框
       previeImgdialogVisible: false,
       // 预览图片的服务器地址
       prevImgUrl: ''
     }
   },
   computed: {
     cateId() {
       return this.addForm.goods_cat[this.addForm.goods_cat.length - 1]
     }
   },
   // 监听下拉菜单的隐藏
   watch: {
     // 只要级联菜单发生了改变，就隐藏菜单
     // 因为addForm是复杂数据类型，里面的属性发生改变时进行侦听，此时需要深度侦听
     addForm: {
       handler() {
         // 隐藏下拉菜单
         this.$refs.cateHandle.dropDownVisible = false
       },
       deep: true
     }
   },
   created() {
     this.getCateList()
   },
   methods: {
     // 获取所有的分类数据
     async getCateList() {
       this.cateList = await getCateListApi({
         type: 3
       })
     },
     // 监听tab栏的切换事件
     async handleClick() {
       if (this.addForm.goods_cat.length !== 3) {
         return
       }
       // 获取商品的动态参数和静态属性数据
       if (this.activeIndex === '1') {
         // 参数
         const data = await getParamsByCatIdApi(this.cateId, 'many')
         data.forEach(item => {
           item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
         })
         this.manyParams = data
         // console.log(this.manyParams);
       }
       if (this.activeIndex === '2') {
         // 属性
         this.onlyParams = await getParamsByCatIdApi(this.cateId, 'only')
         // console.log(this.onlyParams);
       }
     },
     // 级联菜单改变时
     handleChange() {
       if (this.addForm.goods_cat.length !== 3) {
         this.addForm.goods_cat = []
       }
     },
     // 切换tab选项卡的钩子函数,自动触发的机制是：从起始的tab栏切换到另外一个tab栏时自动触发
     beforeLeave(activeName, oldActiveName) {
       // 第一个选项卡要求选择
       if (this.addForm.goods_cat.length !== '3' && activeName !== '0') {
         this.$message.error('请先选择商品分类')
         return false
       }
       // 必须要上传完图片后才能切换到商品介绍的tab栏
       if (oldActiveName === '3' && activeName === '4' && this.addForm.pics.length === '0') {
         this.$message.error('请先上传图片')
         return false
       }
     },

     // 图片上传

     // 图片预览的钩子
     handlePreview(file) {
       // console.log(file); // 要预览的图片对象
       this.prevImgUrl = file.response.data.url
       this.previeImgdialogVisible = true
     },
     // 图片删除的钩子
     handleRemove(file, fileList) {
       // console.log(file); // 要被删除的图片对象
       const pic = file.response.data.tmp_path
       this.addForm.pics = this.addForm.pics.filter(v => v.pic !== pic)
       // 要从添加表单的数据中删除
       // console.log(this.addForm.pics);
     },
     // 图片上传成功的钩子
     handleSuccess(res, file, fileList) {
       const {
         meta,
         data
       } = res
       if (meta.status === 200) {
         // 把上传成功的临时路径保存在添加表单的数据中
         this.addForm.pics.push({
           pic: data.tmp_path
         })
       }
     },
     // 添加商品
     addGoods() {
       this.$refs.addFormRef.validate(async valid => {
         if (!valid) return
         if (this.addForm.pics.length === 0) {
           return this.$message.error('必须选择图片上传')
         }
         // console.log(this.addForm);
         // 构建参数
         const attrs = []
         // 静态属性
         this.onlyParams.forEach(item => {
           attrs.push({
             attr_id: item.attr_id,
             attr_value: item.attr_vals
           })
         })
         // 动态参数
         this.manyParams.forEach(item => {
           attrs.push({
             attr_id: item.attr_id,
             attr_value: item.attr_vals ? item.attr_vals.join() : ''
           })
         })
         // 把表单对象赋值给一个新的变量,此方法得到新对象相当于浅拷贝，还是同一个对象
         // let addData=this.addForm
         // console.log(addData===this.addForm); true
         // 深拷贝
         const addData = _.cloneDeep(this.addForm)
         // console.log(addData === this.addForm) // false
         // 组装数据
         addData.attrs = attrs
         // 这样改，原本的数组变成了字符串
         // this.addForm.goods_cat=this.addForm.goods_cat.join()
         addData.goods_cat = addData.goods_cat.join()
         // console.log(addData);return;
         await addGoodsApi(addData)
         // console.log(res);
         this.$message.success('添加成功')
         this.$router.push('/goods')
       })
     }
   }
 }
